/*
 * @Author: jiayu
 * @Date: 2022-10-08 11:00:45
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-20 15:52:45
 * @Description: 
 */
import { instance } from '@/services/jy-api/api';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import { Link, useMatch, useLocation, withRouter } from '@umijs/max';
import { useEffect, useState, useCallback } from 'react';
import React, { useRef } from 'react';
import { Button, DatePicker, Modal } from 'antd';
import moment from 'moment'
import AccountTable from '../LoginLog/AccountTable';
import LoginAccountTable from '../LoginLog/LoginAccountTable';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';

const TableList: React.FC = (props) => {
  const actionRef = useRef<ActionType>();
  const [timeParams, setTimeParams] = useState()
  const [accountTableVisable, setAccountTableVisable] = useState(false)
  const [loginAccountTableVisable, setLoginAccountTableVisable] = useState(false)
  const [departmentId, setDepartmentId] = useState()
  const [parentId, setParentId] = useState<any>('')
  const [type, setType] = useState(1)
  const columns: ProColumns<API.RuleListItem>[] = [
    {
      title: '时间段',
      dataIndex: 'time',
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        if (type === 'form') {
          return null;
        }
        const status = form.getFieldValue('state');
        if (status !== 'open') {
          return (
            // value 和 onchange 会通过 form 自动注入。
            <RangePicker format={dateFormat} style={{ marginRight: 10 }} value={timeParams} />
          );
        }
        return defaultRender(_);
      },
      hideInTable: true
    },
    {
      title: '部门',
      dataIndex: 'short_name',
      hideInSearch: true,
    },
    {
      title: '账户总数',
      dataIndex: 'zh_number',
      valueType: 'textarea',
      hideInSearch: true,
      // render: (record, item) => {
      //   return <a onClick={() => {
      //     console.log({ item })
      //     setDepartmentId(item.id)
      //     setAccountTableVisable(true)
      //   }}>{record}</a>
      // }
    },
    {
      title: 'PC端登录人数',
      dataIndex: 'login_number',
      valueType: 'textarea',
      hideInSearch: true,
      render: (record, item) => {
        return <a onClick={() => {
          setDepartmentId(item.id)
          setLoginAccountTableVisable(true)
          setType(1)
        }}>{record}</a>
      }
    },
    {
      title: 'PC端登录人次',
      dataIndex: 'num',
      valueType: 'textarea',
      hideInSearch: true,
    },
    // {
    //   title: 'APP登录总次数',
    //   dataIndex: 'app_login_num',
    //   valueType: 'textarea',
    //   hideInSearch: true,
    // },
    {
      title: ' PC端登录率',
      dataIndex: 'login_lv',
      valueType: 'textarea',
      hideInSearch: true,
    },

    {
      title: '5G眼镜端登录人数',
      dataIndex: 'login_number_5G',
      valueType: 'textarea',
      hideInSearch: true,
      render: (record, item) => {
        return <a onClick={() => {
          setType(2)
          setDepartmentId(item.id)
          setLoginAccountTableVisable(true)
        }}>{record}</a>
      }
    },
    {
      title: '5G眼镜端登录人次',
      dataIndex: 'num_5G',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '5G眼镜端端登录率',
      dataIndex: 'login_lv_5G',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: ' 僵尸账户总数 ',
      dataIndex: 'zh_js',
      valueType: 'textarea',
      hideInSearch: true,
    },
  ];
  const request = useCallback((params: {
    // querya
    /** 当前的页码 */
    current?: number;
    /** 页面的容量 */
    pageSize?: number;
  },
    options?: { [key: string]: any },) => {
    let { time, ...data } = params
    const localStorageTime = localStorage.getItem('timeParams')

    if (!localStorageTime || localStorageTime == 'undefined') {
      localStorage.setItem('timeParams', time)
    } else {
      time = localStorageTime.split(',')
      setTimeParams([moment(localStorageTime.split(',')[0]), moment(localStorageTime.split(',')[1])])
    }
    setTimeParams(time)
    return instance('/index/Screen/loginDetails', {
      method: 'GET',
      params: {
        ...data,
        start_time: time ? moment(time[0]).format('YYYY-MM-DD') : undefined,
        end_time: time ? moment(time[1]).format('YYYY-MM-DD') : undefined,
        department_id: parentId,
      },
    })
  }, [parentId])
  const match = useMatch({
    path: 'loginLog3/:id'
  })
  useEffect(() => {
    setParentId(match?.params.id)
    const times = localStorage.getItem('timeParams')
    debugger
    if (!times || times == 'undefined') {
      return
    }
    const x = times.split(',')
    setTimeParams([moment(x[0]), moment(x[1])])
    actionRef.current?.reload()
  }, [])
  return (
    <PageContainer breadcrumb={
      {
        routes: [
          {
            path: '/loginLog',
            breadcrumbName: '登录日志',
          },
          {
            path: '',
            breadcrumbName: '三级页面',
          },
        ]
      }
    }>
      <ProTable<API.RuleListItem, API.PageParams>
        actionRef={actionRef}
        rowKey="key"
        request={request}
        columns={columns}
      />
      <Modal destroyOnClose open={accountTableVisable} width={1000} footer={<Button type='primary' onClick={() => setAccountTableVisable(false)}>确定</Button>} onCancel={() => setAccountTableVisable(false)}>
        <AccountTable timeParams={timeParams} departmentId={departmentId} />
      </Modal>
      <Modal destroyOnClose open={loginAccountTableVisable} width={1000} footer={<Button type='primary' onClick={() => setLoginAccountTableVisable(false)}>确定</Button>} onCancel={() => setLoginAccountTableVisable(false)}>
        <LoginAccountTable timeParams={timeParams} departmentId={departmentId} type={type} />
      </Modal>
    </PageContainer>
  );
};

export default withRouter(TableList);
